{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h1 class="page-title">Free AI Image Enhancer - Upscale and Improve Image Quality</h1>
      </div>
      <div class="seo-h1">
        <h2>Enhance Images with AI Technology</h2>
        <h2>Key Features of Our Image Enhancement Tool
            <ul>
                <li>AI-Powered Upscaling: Increase image resolution up to 4x without quality loss.</li>
                <li>Smart Enhancement: Improve sharpness, reduce noise, and enhance details.</li>
                <li>Multiple Algorithms: Choose from upscaling, sharpening, and denoising options.</li>
                <li>Format Support: Works with JPEG, PNG, WebP, and BMP image formats.</li>
                <li>Real-time Preview: See before and after comparison instantly.</li>
                <li>100% Free: No watermarks, no registration required.</li>
            </ul>
        </h2>
        <h2>How to Use This Image Enhancer?
            <ul>
                <li>Upload your image by clicking or dragging to the upload area.</li>
                <li>Select enhancement type: Upscale, Sharpen, or Denoise.</li>
                <li>For upscaling, choose the scale factor (2x, 3x, or 4x).</li>
                <li>Click "Enhance Image" and wait for processing to complete.</li>
                <li>Download the enhanced high-quality result.</li>
            </ul>
        </h2>
        <h2>Frequently Asked Questions (FAQs)
            <h3>What enhancement options are available?</h3>
            <h3>What is the maximum file size supported?</h3>
            <h3>How long does image processing take?</h3>
        </h2>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
.image-enhance-container {
    min-height: 600px;
}
.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 3rem 2rem;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}
.upload-area.dragover {
    border-color: #206bc4;
    background-color: #e7f1ff;
}
.upload-area:hover {
    border-color: #206bc4;
    background-color: #f0f7ff;
}
.enhancement-option {
    margin-bottom: 1rem;
}
.scale-option {
    margin-right: 1rem;
}
.progress-container {
    margin: 1rem 0;
    display: none;
}
.image-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.comparison-container {
    display: none;
    margin-top: 2rem;
}
.text-sm {
    font-size: 0.875rem;
}
.enhancement-controls {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
</style>

<div class="page-body">
    <div class="container-xl">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Upload Image</h3>
                    </div>
                    <div class="card-body">
                        <input type="file" id="image-input" accept="image/jpeg,image/png,image/webp,image/bmp" style="display: none;">
                        <div class="upload-area" id="upload-area">
                            <div class="upload-content">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mb-3 text-muted">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14,2 14,8 20,8"></polyline>
                                    <circle cx="10" cy="13" r="2"></circle>
                                    <path d="m20 17-1.09-1.09a2 2 0 0 0-2.82 0L10 22"></path>
                                </svg>
                                <h4>Click to upload or drag and drop</h4>
                                <p class="text-muted">JPEG, PNG, WebP, BMP files are supported</p>
                                <p class="text-muted">Maximum file size: 10MB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="enhancement-controls" id="enhancement-controls" style="display: none;">
                    <h4 class="mb-3">Enhancement Settings</h4>

                    <div class="mb-3">
                        <label class="form-label">Enhancement Type</label>
                        <div>
                            <label class="form-check form-check-inline enhancement-option">
                                <input class="form-check-input" type="radio" name="enhanceType" value="upscale" checked>
                                <span class="form-check-label">Upscale</span>
                            </label>
                            <label class="form-check form-check-inline enhancement-option">
                                <input class="form-check-input" type="radio" name="enhanceType" value="sharpen">
                                <span class="form-check-label">Sharpen</span>
                            </label>
                            <label class="form-check form-check-inline enhancement-option">
                                <input class="form-check-input" type="radio" name="enhanceType" value="denoise">
                                <span class="form-check-label">Denoise</span>
                            </label>
                        </div>
                    </div>

                    <div class="mb-3" id="scale-options">
                        <label class="form-label">Scale Factor</label>
                        <div>
                            <label class="form-check form-check-inline scale-option">
                                <input class="form-check-input" type="radio" name="scaleFactor" value="2" checked>
                                <span class="form-check-label">2x</span>
                            </label>
                            <label class="form-check form-check-inline scale-option">
                                <input class="form-check-input" type="radio" name="scaleFactor" value="3">
                                <span class="form-check-label">3x</span>
                            </label>
                            <label class="form-check form-check-inline scale-option">
                                <input class="form-check-input" type="radio" name="scaleFactor" value="4">
                                <span class="form-check-label">4x</span>
                            </label>
                        </div>
                    </div>

                    <button type="button" id="enhance-btn" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-2">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                        </svg>
                        Enhance Image
                    </button>

                    <div class="progress-container">
                        <label class="form-label">Processing...</label>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card" id="preview-card" style="display: none;">
                    <div class="card-header">
                        <h3 class="card-title">Image Preview</h3>
                    </div>
                    <div class="card-body text-center">
                        <img id="preview-image" class="image-preview" alt="Preview">
                        <div class="mt-3">
                            <small class="text-muted">Original: <span id="original-dimensions"></span></small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="comparison-container" id="comparison-container">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Enhancement Results</h3>
                            <div class="card-actions">
                                <button type="button" id="download-btn" class="btn btn-success" style="display: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-2">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                        <polyline points="7,10 12,15 17,10"></polyline>
                                        <line x1="12" y1="15" x2="12" y2="3"></line>
                                    </svg>
                                    Download Enhanced Image
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="text-center mb-3">Original</h5>
                                    <div class="text-center">
                                        <img id="original-image" class="image-preview" alt="Original">
                                        <div class="mt-2">
                                            <small class="text-muted">
                                                <span id="original-size-info"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="text-center mb-3">Enhanced</h5>
                                    <div class="text-center">
                                        <img id="enhanced-image" class="image-preview" alt="Enhanced">
                                        <div class="mt-2">
                                            <small class="text-muted">
                                                <span id="enhanced-size-info"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript'>
$(document).ready(function() {
    let uploadedImageUrl = '';
    let enhancedImageUrl = '';

    // Upload area interactions
    const uploadArea = $('#upload-area');
    const fileInput = $('#image-input');

    uploadArea.on('click', function() {
        fileInput.click();
    });

    uploadArea.on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('dragover');
    });

    uploadArea.on('dragleave', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
    });

    uploadArea.on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
        handleFiles(e.originalEvent.dataTransfer.files);
    });

    fileInput.on('change', function(e) {
        handleFiles(e.target.files);
    });

    // Enhancement type change handler
    $('input[name="enhanceType"]').on('change', function() {
        const enhanceType = $(this).val();
        if (enhanceType === 'upscale') {
            $('#scale-options').show();
        } else {
            $('#scale-options').hide();
        }
    });

    // Enhance button click handler
    $('#enhance-btn').on('click', function() {
        enhanceImage();
    });

    // Download button click handler
    $('#download-btn').on('click', function() {
        downloadEnhancedImage();
    });

    function handleFiles(files) {
        if (files.length === 0) return;

        const file = files[0];
        if (!file.type.startsWith('image/')) {
            alert('Please select a valid image file.');
            return;
        }

        if (file.size > 10 * 1024 * 1024) {
            alert('File size exceeds 10MB limit.');
            return;
        }

        uploadImage(file);
    }

    function uploadImage(file) {
        const formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: '/image-enhance/upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.status === 200) {
                    uploadedImageUrl = response.url;
                    showImagePreview(response.url);
                    $('#enhancement-controls').show();
                } else {
                    alert('Upload failed: ' + response.msg);
                }
            },
            error: function() {
                alert('Upload failed. Please try again.');
            }
        });
    }

    function showImagePreview(imageUrl) {
        $('#preview-image').attr('src', imageUrl);
        $('#preview-card').show();

        // Load image to get dimensions
        const img = new Image();
        img.onload = function() {
            $('#original-dimensions').text(this.width + 'x' + this.height);
        };
        img.src = imageUrl;
    }

    function enhanceImage() {
        if (!uploadedImageUrl) {
            alert('Please upload an image first.');
            return;
        }

        const enhanceType = $('input[name="enhanceType"]:checked').val();
        const scaleFactor = $('input[name="scaleFactor"]:checked').val();

        $('#enhance-btn').prop('disabled', true);
        $('.progress-container').show();

        $.ajax({
            url: '/image-enhance/process',
            type: 'POST',
            data: {
                imageUrl: uploadedImageUrl,
                enhanceType: enhanceType,
                scaleFactor: scaleFactor
            },
            success: function(response) {
                $('#enhance-btn').prop('disabled', false);
                $('.progress-container').hide();

                if (response.status === 200) {
                    enhancedImageUrl = response.enhancedUrl;
                    showComparisonResults(response);
                } else {
                    alert('Enhancement failed: ' + response.msg);
                }
            },
            error: function() {
                $('#enhance-btn').prop('disabled', false);
                $('.progress-container').hide();
                alert('Enhancement failed. Please try again.');
            }
        });
    }

    function showComparisonResults(result) {
        $('#original-image').attr('src', uploadedImageUrl);
        $('#enhanced-image').attr('src', result.enhancedUrl);
        $('#original-size-info').text(result.originalSize);
        $('#enhanced-size-info').text(result.enhancedSize + ' (' + result.enhanceType + ')');

        $('#comparison-container').show();
        $('#download-btn').show();

        // Scroll to results
        $('html, body').animate({
            scrollTop: $('#comparison-container').offset().top - 100
        }, 500);
    }

    function downloadEnhancedImage() {
        if (enhancedImageUrl) {
            const a = document.createElement('a');
            a.href = enhancedImageUrl;
            a.download = 'enhanced_image.jpg';
            a.click();
        }
    }
});
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Free AI Image Enhancer and Upscaler",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Enhance and upscale images with AI technology. Improve image quality, increase resolution, and make photos sharp and clear.",
  "keywords": "image enhancer, upscale image, AI image enhancement, photo upscaling, image quality improvement"
}
</script>
{%endblock%}